<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Profile</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/>

    <!-- FooTable -->
    <link th:href="@{/css/plugins/footable/footable.core.css}" rel="stylesheet" />
    <link th:href="@{/css/plugins/toastr/toastr.min.css}" rel="stylesheet" />

    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
    <div th:include="common/navbar_left :: navbar_left"></div>

    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom" th:include="common/navbar_header :: navbar_header"></div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>Message</h2>
                <ol class="breadcrumb">
                    <li>
                        <a>Home</a>
                    </li>
                    <li class="active">
                        <strong>Meaasge</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2"></div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-1"> Unread </a></li>
                            <li id="nav-tab-2" class=""><a data-toggle="tab" href="#tab-2"> Read </a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5>This is an unread messagebox!</h5>
                                        </div>
                                        <div class="ibox-content">
                                            <table id="unread-table" class="footable table table-stripped toggle-arrow-tiny">
                                                <thead>
                                                <tr>
                                                    <th class="col-md-1" data-toggle="true"></th>
                                                    <th class="col-md-2">From</th>
                                                    <th class="col-md-2">Type</th>
                                                    <th data-hide="all">User ID</th>
                                                    <th data-hide="all">User Name</th>
                                                    <th data-hide="all">Content</th>
                                                    <th data-hide="all">Date</th>
                                                    <th class="col-md-2">Action</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr th:each="m,index: ${messageList1}">
                                                    <td class="col-md-1" th:text="${index.index}"></td>
                                                    <td class="col-md-2" th:text="${m.sendName}"></td>
                                                    <td th:if="${m.type == '0'}">Friend Application</td>
                                                    <td th:if="${m.type == '1'}">Job Application</td>
                                                    <td th:if="${m.type == '2'}">Position Forward</td>
                                                    <td th:if="${m.type == '3'}">Position Post</td>
                                                    <td th:if="${m.type == '4'}">Follower</td>
                                                    <td th:if="${m.type == '5'}">Common Message</td>

                                                    <td th:text="${m.sender}"></td>
                                                    <td th:text="${m.sendName}"></td>
                                                    <td><strong th:text="${m.massage}"></strong></td>
                                                    <td th:text="${m.time}"></td>
                                                    <td class="col-md-2">
                                                        <a th:href="@{/message/read(id = ${m.id})}">
                                                            <i class="fa fa-check text-navy">Mark As Read</i>
                                                        </a>&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <a th:if="${m.type == '0'}"
                                                           th:onclick="'acceptFriendApply(\''+ ${m.sender} +'\',\''+${m.sendName}+'\')'">
                                                            <i class="fa fa-check text-navy">Accept</i>
                                                        </a>&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <a th:if="${m.type == '0'}"
                                                           th:onclick="'refuseFriendApply(\''+ ${m.sender} +'\',\''+${m.sendName}+'\')'">
                                                            <i class="fa fa-check text-navy">Refuse</i>
                                                        </a>
                                                        <a th:if="${m.type == '2' || m.type == '3'}" th:href="@{/jobs/detail(pId = ${m.ext1})}">
                                                            <i class="fa fa-check text-navy">Check</i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane active">
                                <div class="panel-body">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5>Your have bean read the messages!</h5>
                                        </div>
                                        <div class="ibox-content">
                                            <table id="read-table" class="footable table table-stripped toggle-arrow-tiny">
                                                <thead>
                                                <tr>
                                                    <th class="col-md-1" data-toggle="true"></th>
                                                    <th class="col-md-2">From</th>
                                                    <th class="col-md-2">Type</th>
                                                    <th data-hide="all">User ID</th>
                                                    <th data-hide="all">User Name</th>
                                                    <th data-hide="all">Content</th>
                                                    <th data-hide="all">Date</th>
                                                    <th class="col-md-2">Status</th>
                                                    <th class="col-md-2">Action</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr th:each="m,index: ${messageList2}">
                                                    <td class="col-md-1" th:text="${index.index}"></td>
                                                    <td class="col-md-2" th:text="${m.sendName}"></td>
                                                    <td th:if="${m.type == '0'}">Friend Application</td>
                                                    <td th:if="${m.type == '1'}">Job Application</td>
                                                    <td th:if="${m.type == '2'}">Position Forward</td>
                                                    <td th:if="${m.type == '3'}">Position Post</td>
                                                    <td th:if="${m.type == '4'}">Follower</td>
                                                    <td th:if="${m.type == '5'}">Common Message</td>
                                                    <td th:text="${m.sender}"></td>
                                                    <td th:text="${m.sendName}"></td>
                                                    <td th:text="${m.massage}"></td>
                                                    <td th:text="${m.time}"></td>
                                                    <td class="col-md-2">Read</td>
                                                    <td class="col-md-2">
                                                        <a th:if="${m.type == '0'}"
                                                           th:onclick="'acceptFriendApply(\''+ ${m.sender} +'\',\''+${m.sendName}+'\')'">
                                                            <i class="fa fa-check text-navy">Accept</i>
                                                        </a>
                                                        <a th:if="${m.type == '0'}"
                                                           th:onclick="'refuseFriendApply(\''+ ${m.sender} +'\',\''+${m.sendName}+'\')'">
                                                            <i class="fa fa-check text-navy">Refuse</i>
                                                        </a>
                                                        <a th:if="${m.type == '2' || m.type == '3'}" th:href="@{/message/checkPosition(id = ${m.ext1})}">
                                                            <i class="fa fa-check text-navy">Check</i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div>
                <strong>Copyright</strong> Jobster &copy; 2018
            </div>
        </div>
    </div>
</div>

<!-- Mainly scripts -->
<div th:include="common/common_js :: common_js"></div>

<!-- Custom and plugin javascript -->
<script th:src="@{/js/inspinia.js}"></script>
<!-- FooTable -->
<script th:src="@{/js/plugins/footable/footable.all.min.js}"></script>

<script th:src="@{/js/plugins/toastr/toastr.min.js}"></script>

<script th:inline="javascript" type="text/javascript">
    //<![CDATA[
    $(function(){
        $('#read-table').footable();
        $('#unread-table').footable();
        $('#tab-2').hide();
        $("#nav-tab-2").one("click",function(){
            $('#tab-2').show();
        })
    });
    var basePath =[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    function acceptFriendApply(friendId, friendName){
        $.ajax({
            url : basePath +"/message/friend/accept",
            type : "GET",
            contentType: "application/json;charset=utf-8",
            data : {'friendId':friendId,'friendName':friendName},
            dataType : "json",
            success : function(result) {
                toastr.success(result.respMessage);
            },
            error:function(msg){
                console.info(msg);
                toastr.warn(msg);
            }
        })
    }
    function refuseFriendApply(friendId, friendName){
        $.ajax({
            url : basePath +"/message/friend/refuse",
            type : "GET",
            contentType: "application/json;charset=utf-8",
            data : {'friendId':friendId,'friendName':friendName},
            dataType : "json",
            success : function(result) {
                toastr.success(result.respMessage);
            },
            error:function(msg){
                console.info(msg);
                toastr.warn(msg);
            }
        })
    }
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-top-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "7000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }
    //]]>
</script>
</body>

</html>
